const components = {
    MuiCssBaseline: {
      styleOverrides: {
        '*': {
          boxSizing: 'border-box',
        },
        html: {
          height: '100%',
          width: '100%',
        },
        body: {
          height: '100%',
          margin: 0,
          padding: 0,
        },
        '#root': {
          height: '100%',
        },
        a: {
          textDecoration: 'none',
        },
        'pre': {
          margin: '8px 0',
          overflow: 'auto',
          padding: '15px',
          borderRadius: '16px',
          wordWrap: 'normal',
          fontSize: '16px',
          fontFamily: 'Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace',
        },
        '.hljs-keyword': {
          color: '#07a',
        },
        '.hljs-title,.hljs-type': {
          color: '#58727e',
        },
        '.hljs-string': {
            color: '#9a6e3a',
        },
        '.hljs-title.function_': {
            color: '#dd4a68'
        },
        '.hljs-tag,.hljs-number': {
            color:'#905',
        },
        '.hljs-tag .hljs-attr': {
            color: '#690'
        },
        '.hljs-tag .hljs-string': {
            color: '#07a'
        },
        '.hljs-comment': {
            color: '#999',
            fontSize: '14px',
            fontWeight: '400'
        },
        '.hljs-built_in': {
            color: '#dd4a68'
        },
        '.hljs-literal': {
            color: '#dd4abd'
        },
        "*[dir='rtl'] .buyNowImg": {
          transform: 'scaleX(-1)',
        },
        '.language-jsx': {
          wordWrap: 'break-word',
          WebkitFontSmoothing: 'auto',
          borderRadius: '16px',
          display: 'block',
          fontFamily: 'Source Code Pro,Monaco,Inconsolata,monospace',
          fontSize: '14px',
          fontWeight: 400,
          lineHeight: '26px',
          overflow: 'auto',
          padding: '16px',
          position: 'relative',
          whiteSpace: 'pre-wrap'
        },
        '.card': {
          borderRadius: '12px',
          marginBottom: '24px',
          padding: '24px',
          '>p>code, .demo-block-title>p>code': {
            WebkitFontSmoothing: 'antialiased',
            borderRadius: '4px',
            display: 'inline',
            fontFamily: 'inherit',
            fontSize: '14px',
            margin: '0 2px',
            padding: '2px 5px',
            wordBreak: 'keep-all'
          },
          '>table': {
            borderCollapse: 'collapse',
            fontSize: '14px',
            lineHeight: 1.5,
            marginTop: '12px',
            width: '100%'
          },
          '>table th': {
            fontWeight: 600,
            padding: '8px 10px',
            textAlign: 'left'
          },
          '>table td': {
            borderTop: '1px solid #f1f4f8',
            padding: '8px',
            ':firstChild': {
              paddingLeft: 0
            }
          },
          '>table code': {
            WebkitFontSmoothing: 'antialiased',
            borderRadius: '4px',
            display: 'inline',
            fontFamily: 'inherit',
            fontSize: '14px',
            margin: '0 2px',
            padding: '2px 5px',
            wordBreak: 'keep-all'
          },
          '>table em': {
            WebkitFontSmoothing: 'auto',
            color: '#4fc08d',
            fontFamily: 'Source Code Pro,Monaco,Inconsolata,monospace',
            fontSize: '14px',
            fontStyle: 'normal'
          },
          '>h3': {
            fontSize: '18px',
            fontWeight: 600,
            marginBottom: '16px'
          },
          '>p': {
            margin: '16px 0',
            color: '#34495e',
            fontSize: '15px',
            lineHeight: '26px'
          }
        },
        '.doc-container': {
          display: 'flex',
          justifyContent: 'space-between',
          padding: 10,
          width: '100%'
        },
        '.md-mobile .code-container, .md-pc .demo-container': {
          flex: 1,
          width: '100%',
          'h1': {
            fontSize: '28px',
            fontWeight: 400,
            margin: '0 0 30px'
          },
          'h2': {
            fontSize: '25px',
            fontWeight: 400,
            margin: '45px 0 20px'
          }
        },
        '.control-block': {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '36px',
          textAlign: 'center',
          color: '#d3dce6',
          cursor: 'pointer',
          transition: '.2s',
          position: 'relative',
          '> span': {
              display: 'block',
              width: '44px',
              height: '36px',
              transition: 'all 0.3s',
              opacity: 0.7
          }
        },
        '.card.show': {
          '.code-block': {
              maxHeight: '100vh',
              overflowY: 'auto',
              opacity: 1
          },
          '.control-block span': {
            transform: 'rotate(180deg)'
          }
        },
        '.card.hide': {
          '.code-block': {
              maxHeight: '0px',
              overflowY: 'auto',
              opacity: 0
          }
        },
        '.md-mobile': {
          '.code-container': {
            flex: 1,
            paddingRight: 350
          },
          '.demo-container': {
            position: 'fixed',
            top: '80px',
            right: '24px',
            borderRadius: '36px',
            boxSizing: 'border-box',
            height: '637px',
            overflow: 'hidden',
            padding: '32px 8px 36px',
            width: '336px',
            minWidth: '336px',
            marginLeft: '30px',
            zIndex: 1,
            '.card': {
              margin: '10px 0 0',
              padding: '8px 12px',
              borderRadius: '0',
              boxShadow: 'none'
             },
            '.code-block, .md-api, .control-block': {
              display: 'none'
            },
            '.md-demo,.md-api': {
              padding: '8px',
              '>h1': {
                alignItems: 'center',
                borderRadius: '14px 14px 0 0',
                display: 'flex',
                fontFamily: 'Roboto-Medium,Roboto',
                fontSize: '17px',
                fontWeight: 500,
                height: '50px',
                justifyContent: 'center',
                position: 'sticky',
                textTransform: 'capitalize',
                top: 0,
                width: '100%',
                margin: 0,
                zIndex: 9
              },
              '.demo-block-title': {
                '>h2': {
                    color: 'rgba(69,90,100,.6)',
                    fontSize: '14px',
                    fontWeight: 400,
                    lineHeight: '16px',
                    margin: 0,
                    padding: '8px 0 12px'
                }
              }
            },
            '.demo-block-title': {
              '*': {
                display: 'none'
              },
              '> h3': {
                display: 'block',
                fontSize: 14,
                fontWeight: 400,
                margin: 0,
                padding: '8px 0 12px'
              }
            }
          }
        },
        '.md-pc': {
          display: 'block',
          // paddingRight: '20px',
          '.code-container': {
            display: 'none',
            paddingRight: '120px',
          },    
          '.demo-block-title': {
            '>h3': {
                fontSize: '18px',
                fontWeight: 600,
                marginBottom: '16px'
            },
            '> p': {
                margin: '16px 0',
                color: '#34495e',
                fontSize: '15px',
                lineHeight: '26px',
                '>code': {
                    WebkitFontSmoothing: 'antialiased',
                    borderRadius: '4px',
                    display: 'inline',
                    fontFamily: 'inherit',
                    fontSize: '14px',
                    margin: '0 2px',
                    padding: '2px 5px',
                    wordBreak: 'keep-all'
                }
            }
          }
        },
        '.light': {
          '.code-container': {
            'h1, h2, h3': {
              color: '#323233',
            }
          },
          '.card': {
            backgroundColor: '#fff',
            boxShadow: '0 8px 12px #ebedf0',
            '>table': {
              color: '#34495e'
            },
            '> p > code, >table code': {
              background: '#f7f8fa'
            },
            '>p': {
              color: '#34495e'
            },
            '.demo-block-title >h3': {
              color: 'rgba(69,90,100,.6)'
            }
          },
          'pre .language-jsx': {
            background: '#fafafa',
          },
          'pre': {
            color: '#000'
          },
          'language-jsx': {
            color: '#999'
          },
          '.md-mobile': {
            '.md-demo,.md-api': {
              '>h1': {
                color: '#333'
              },
              '>h1, .demo-block': {
                backgroundColor: '#fff',
              },
              '.demo-block-title': {
                '>h2': {
                  color: 'rgba(rgba(69,90,100,.6))'
                },
                '>p >code': {
                  backgroundColor: '#f7f8fa',
                }
              }
            },
            '.demo-container': {
              background: 'url() 50% no-repeat',
              boxShadow: '0 4px 12px #ebedf0',
            },
            '.demo-block-title >p': {
              color: '#34495e',
              '> code': {
                background: '#f7f8fa'
              }
            },
          },
          '.control-block > span': {
            background: 'url("") center center no-repeat',
            backgroundSize: '20px auto',
          }
        },
        '.dark': {
          '.code-container': {
            'h1, h2': {
              color: '#fff',
            }
          },
          '.card': {
            backgroundColor: '#32363e',
            boxShadow: '0 8px 12px #000',
            '>table': {
              color: '#f5f5f5'
            },
            '> p > code, >table code': {
              background: '#767e89'
            },
            '>p': {
              color: '#f5f5f5'
            } 
          },
          'pre .language-jsx': {
            background: '#001E3C'
          },
          'pre': {
            color: '#F5F5F5'
          },
          'language-jsx': {
            color: '#999'
          },
          '.md-demo,.md-api': {
            '>h1': {
              color: '#f5f5f5'
            },
            '.demo-block': {
              backgroundColor: '#32363e',
            },
            '.demo-block-title': {
              '>h2': {
                color: 'rgba(255,255,255,.6)'
              },
            }
          },
          '.md-mobile .demo-container': {
            background: 'url() 50% no-repeat',
            boxShadow: '0 4px 12px #000',
          },
          '.demo-block-title >p': {
            color: '#f5f5f5',
            '> code': {
              background: '#767e89'
            }
          },
          '.control-block > span': {
            background: 'url("") center center no-repeat',
            backgroundSize: '20px auto',
          }
        },
        '.isMobile': {
          '.code-container': {
            display: 'none',
            'h1': {
              fontSize: 20
            },
            'h2': {
              fontSize: 18
            },
            'h3': {
              fontSize: 16
            },
            'p': {
              fontSize: 14
            }
          },
          '.md-mobile .demo-container': {
            margin: 0,
            position: 'relative',
            top: 0,
            left: 0,
            width: '100%',
            height: 'auto',
            padding: 0,
            background: 'none !important',
            boxShadow: 'none !important',
          },
          '.demo-block-title': {
            '*': {
              display: 'inline-block !important'
            },
          },
          '.demo-container .code-block, .md-api': {
            display: 'block !important'
          },
          '.control-block': {
            display: 'flex !important'
          },
          '.md-mobile': {
            padding: 0,
            '.md-demo >h1': {
              background: 'none',
              justifyContent: 'left'
            }
          },
          '&.light': {
            '.md-demo >h1,.md-api >h2': {
              fontSize: 24,
              color: 'rgba(0,0,0,.54)'
            }
          },
          '&.dark': {
            '.md-demo >h1,.md-api >h2': {
              fontSize: 24,
            }
          },
          '&.hideInSimulator .code-container': {
            display: 'block'
          },
        },
        '.hideInSimulator': {
          '.md-mobile': {
            '.code-container': {
              paddingRight: 0
            },
            '.demo-container': {
              display: 'none'
            }
          },
          '.md-pc': {
            '.demo-container': {
              flex: '1'
            }
          }
        },
        '.buyNowImg': {
          position: 'absolute',
          right: '-44px',
          top: '-18px',
          width: '143px',
          height: '175px',
        },
        '.MuiCardHeader-action': {
          alignSelf: 'center !important',
        },
        '.scrollbar-container': {
          borderRight: '0 !important',
        },
        "*[dir='rtl'] .welcomebg:before": {
          backgroundPosition: 'top -24px left -9px !important',
        },
      },
    },
    MuiContainer: {
      styleOverrides: {
        root: {
          paddingLeft: '15px !important',
          paddingRight: '15px !important',
          maxWidth: '1600px',
        },
      },
    },
  
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
          boxShadow: 'none',
          fontSize: '15px',
          '&:hover': {
            boxShadow: 'none',
          },
        },
      },
    },
  
    MuiListItem: {
      styleOverrides: {
        root: {
          borderRadius: '9px',
        },
      },
    },
  
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: '20px',
          padding: '14px',
          margin: '15px',
          boxShadow: '0px 7px 30px 0px rgba(90, 114, 123, 0.11)',
        },
      },
    },
  
    MuiListItemIcon: {
      styleOverrides: {
        root: {
          minWidth: '40px',
        },
      },
    },
  
    MuiGridItem: {
      styleOverrides: {
        root: {
          paddingTop: '30px',
          paddingLeft: '30px !important',
        },
      },
    },
    MuiLinearProgress: {
      styleOverrides: {
        root: {
          backgroundColor: '#ecf0f2',
          borderRadius: '6px',
        },
      },
    },
    MuiMenuItem: {
      styleOverrides: {
        root: {
          borderRadius: '0',
        },
      },
    },
    MuiChip: {
      styleOverrides: {
        root: {
          fontWeight: '500',
          fontSize: '0.75rem',
        },
      },
    },
  };
  
export default components;
  